---
layout: default
title: "BiBi"
description: "总要哔哔点啥"
header-img: "img/cover/145579.jpg"
header-mask: 0.35
---

<!-- Page Header -->
<header class="intro-header"
        style="background-image: url('{{ site.picurl }}/{% if page.header-img %}{{ page.header-img }}{% else %}{{ site.header-img }}{% endif %}')">
    <div class="header-shade">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                    <div class="site-heading">
                        <h1>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</h1>
                        <span class="subheading">{{ page.description }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>

<!-- Main Content -->
<div class="container">
    <div class="row">
        <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
            <!-- 存放说说的容器 -->
            <div id="artitalk_main"></div>
            <hr>
            {% include comment.html %}
        </div>
    </div>
</div>

<style>
    #artitalk_main {
        margin-top: 10px;
    }
    #artitalk_main .cbp_tmlabel img {
        max-width: 100%;
    }
    #artitalk_main .cbp_tmtimeline > li .cbp_tmlabel p {
        margin: 10px 0;
    }
    #artitalk_main .cbp_tmtimeline > li .cbp_tmlabel {
        margin: 0 0 40px 65px;
    }
    @media (max-width: 860px) {
        #artitalk_main .cbp_tmtimeline > li .cbp_tmlabel {
            transform: none;
        }
    }
    @media (max-width: 630px) {
        #artitalk_main .shuoshuo_author_img {
            display: none;
        }
        #artitalk_main .cbp_tmtimeline > li .cbp_tmlabel {
            margin: 0 0 25px 0;
        }
    }
    /* https://cungudafa.blog.csdn.net/article/details/106224223 */
    #artitalk_main .cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel {
        background: linear-gradient(-45deg, #AEC5EB 15%, #3A405A 85%);
        color: white;
    }
    #artitalk_main .cbp_tmtimeline > li .cbp_tmlabel {
        background: linear-gradient(-45deg, #F9DEC9 15%, #AEC5EB 85%);
        color: white;
    }
    #artitalk_main .cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel:after {
        border-right-color: #3A405A
    }
    #artitalk_main .cbp_tmtimeline > li .cbp_tmlabel:after {
        border-right-color: #AEC5EB
    }
    #operare_artitalk, #artitalk_main .at_button {
        background: #AEC5EB;
        color: white;
    }
    #operare_artitalk, #artitalk_main .at_button:hover {
        background: #3A405A;
    }
</style>
{% if site.artitalk.enable %}
<script async>
    new Artitalk({
        appId: '{{site.valine.appId}}',
        appKey: '{{site.valine.appKey}}',
        serverURL: '{{site.valine.serverURL}}',
        atComment: 0
    })
</script>
{% endif %}